<template>
	<view class="content">
		<scroll-view :scroll-y="true" class="scrollView">
			<view class="shopitem" v-for="(item,index) in shopdata" :key="index">
				<view class="left-ridio" @tap="selectedItem(item,index)">
					<radio class="radio-content" :checked="item.checked" color="#013CAA"></radio>
				</view>
				<view class="center-image">
					<image v-if="item.commonFileDtoList[0].url" :src="item.commonFileDtoList[0].url" mode=""></image>
					<image v-else :src="proxy.serverimageUrl + 'home/shopimg.png'" mode=""></image>
				</view>
				<view class="right-information">
					<p class="title">{{item.cname}}</p>
					<view class="selectBox" @click="switchsize(item)">
						<view>{{item.sname}},{{item.specificationsSize}}</view>
						<image :src="proxy.serverimageUrl + 'components/downarrow.png'" mode=""></image>
					</view>
					<view class="priceAndnum">
						<view class="left-price">
							￥{{item.commodityPrice}}
						</view>
						<view class="right-number">
							<up-number-box v-model="item.number" :name="item.scid" @change="numberonChange">
								<template #minus>
									<view class="minus">
										<up-icon name="minus" size="10" color="#636363"></up-icon>
									</view>
								</template>
								<template #input>
									<text style="width: 40rpx;text-align: center;" class="input">{{item.number}}</text>
								</template>
								<template #plus>
									<view class="plus">
										<up-icon name="plus" color="#636363" size="10"></up-icon>
									</view>
								</template>
							</up-number-box>
						</view>
					</view>
				</view>
			</view>
			<view class="kongBox" style="height: 30rpx; width: 100%;">

			</view>
		</scroll-view>
		<view class="totalpriceBox">
			<label class="radio" @tap="SelectAll">
				<radio color="#013CAA" class="radio-content" :checked="SelectedAll" />
				<view class="text">全选</view>
			</label>
			<view class="amount">
				<span class="text1">合计</span>
				<span class="text2">￥{{totalPrice}}</span>
			</view>
			<view class="btnbox">
				<up-button color="#013CAA" @click="goorderset" :text="btntext"></up-button>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		defineProps,
		watchEffect,
		computed,
		getCurrentInstance
	} from 'vue';
	// import {
	// 	useStore
	// } from 'vuex'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	const { proxy,ctx } = getCurrentInstance()
	const props = defineProps({
		Refreshdata: String,
		btnedittext: String
	})
	onShow(() => {
		getcart()
	})
	const btntext = ref('去结算')
	watchEffect(() => {
		console.log(props.Refreshdata);
		// 当props.data变化时，执行刷新逻辑
		if (props.Refreshdata !== 'no') {
			// 这里可以添加你的刷新逻辑，比如重新请求数据等
			getcart()
		}
		if (props.btnedittext == '退出编辑') {
			btntext.value = '删除'
		} else {
			btntext.value = '去结算'
		}
	});
	import {
		queryShoppingCartByOpenID,
		queryStudentSpecifications,
		modifyShoppingCart,
		removeShoppingCart
	} from '@/utils/api.js'
	/*引入vuex*/
	// const store = useStore()
	/*引入emit*/

	const emit = defineEmits(['myEvent', 'sizechange'])
	const switchsize = (item) => {
		let obj = JSON.stringify(item)
		emit('sizechange', obj);
	}
	/*全选绑定的v-model值*/
	const SelectedAll = ref(false)
	/*判断每个商品单选框*/
	const selectedItem = (item, index) => {
		item.checked = !item.checked
		if (!item.checked) {
			SelectedAll.value = false
		} else {
			// 判断每一个商品是否是被选择的状态
			const cartList = shopdata.value.every(item => {
				return item.checked === true
			})
			if (cartList) {
				SelectedAll.value = true
			} else {
				SelectedAll.value = false
			}
		}
	}
	/*全选按钮事件*/
	const SelectAll = () => {
		SelectedAll.value = !SelectedAll.value
		if (SelectedAll.value) {
			shopdata.value.map(item => {
				item.checked = true
			})
		} else {
			shopdata.value.map(item => {
				item.checked = false
			})
		}
	}
	/*商品加减*/
	const numberonChange = (e) => {
		console.log(e);
		let params = {
			scid: e.name,
			number: e.value
		}
		modifyShoppingCart(params).then(res => {
			getcart()
		})
	}
	/*获取商品列表*/
	const shopdata = ref([])
	/*获取购物车列表接口方法*/
	const getcart = () => {
		let params = {
			openid:uni.getStorageSync('openid'),
			sid:uni.getStorageSync('sid')
		}
		queryShoppingCartByOpenID(params).then(res => {
			if (res.code == 200) {
				shopdata.value = res.rows
				if(shopdata.value.length == 0){
					SelectedAll.value = false
				}
				emit('myEvent', shopdata.value.length);
			}
		})
	}
	// 计算总价
	const totalPrice = computed(() => {
		// 3.1 获取书籍的价格和数量
		// 将bookList转化为整数的数组
		const result = shopdata.value
			.map((book) => {
				if (book.checked) {
					const {
						commodityPrice,
						number
					} = book;
					return commodityPrice * number;
				} else {
					return 0 * 0
				}

			})
			// 3.2使用reduce求和
			.reduce((a, b) => a + b, 0);
		// 3.3 保留两位小数
		return result
	});
	/*点击跳转到去结算界面*/
	const goorderset = () => {
		const scidArray = ref([])
		shopdata.value
			.map(item => {
				if (item.checked) {
					scidArray.value.push(item.scid)
				}
			})
		let params = {
			scidArray: scidArray.value
		}
		if(scidArray.value.length > 0){
			if (btntext.value == '删除') {
				removeShoppingCart(params).then(res => {
					if(res.code == 200){
						setTimeout(() => {
							uni.showToast({
								title: '删除成功',
								duration: 1000,
								icon: 'success'
							})
							setTimeout(() => {
								uni.hideToast();
								close()
							}, 1000)
						}, 0)
						getcart()
						SelectedAll.value = false
					}
				})
			}else{
				let arr = JSON.stringify(scidArray.value)
				uni.setStorageSync('ids',arr)
				uni.navigateTo({
					url:'/subpages/Ordersettlement/index?ids=' + arr
				})
				SelectedAll.value = false
			}
		}else{
			uni.showToast({
				title: '请选择商品',
				duration: 1000,
				icon: 'error'
			})
		}
		

	}
</script>

<style lang="scss" scoped>
	.content {

		padding-top: 36rpx;

		.scrollView {
			// margin-bottom: 20rpx;
			padding: 0 30rpx;
			height: calc(100vh - 430rpx);
			box-sizing: border-box;

			.shopitem {
				margin-top: 36rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left-ridio {
					.radio-content {
						transform: scale(0.65)
					}
				}

				.center-image {
					width: 180rpx;
					height: 180rpx;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.right-information {
					width: 420rpx;

					.title {
						font-family: SourceHanSansSC;
						font-weight: 500;
						font-size: 30rpx;
						color: #303030;
						line-height: 40rpx;
					}

					.selectBox {
						margin-top: 20rpx;
						width: 200rpx;
						height: 43rpx;
						background: #F5F5F5;
						border-radius: 20rpx;
						font-family: SourceHanSansSC;
						font-weight: 400;
						font-size: 22rpx;
						color: #636363;
						line-height: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 20rpx;

						image {
							width: 15rpx;
							height: 10rpx;
							right: 0;
						}
					}

					.priceAndnum {
						margin-top: 49rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;

						.left-price {
							font-family: SourceHanSansSC;
							font-weight: 500;
							font-size: 36rpx;
							color: #013CAA;
							line-height: 40rpx;
						}

						.right-number {
							.minus {
								width: 40rpx;
								height: 40rpx;
								background-color: #F5F5F5;
								@include flex;
								justify-content: center;
								align-items: center;
							}

							.input {
								padding: 0 10px;
							}

							.plus {
								width: 40rpx;
								height: 40rpx;
								background-color: #F5F5F5;
								/* #ifndef APP-NVUE */
								display: flex;
								/* #endif */
								justify-content: center;
								align-items: center;
							}
						}
					}
				}
			}

		}

		.totalpriceBox {
			display: flex;
			align-items: center;
			justify-content: space-between;
			height: 110rpx;
			padding: 0 30rpx;
			border-top: 1rpx solid #EEEEEE;

			.radio {
				display: flex;
				align-items: center;

				.radio-content {
					transform: scale(0.65)
				}

				.text {
					font-family: SourceHanSansSC;
					font-weight: 400;
					font-size: 26rpx;
					color: #303030;
					line-height: 40rpx;
				}
			}

			.amount {
				margin-left: 120rpx;
				margin-right: 42rpx;

				.text1 {
					font-family: SourceHanSansSC;
					font-weight: 400;
					font-size: 26rpx;
					color: #303030;
					line-height: 40rpx;
				}

				.text2 {
					font-family: SourceHanSansSC;
					font-weight: 500;
					font-size: 36rpx;
					color: #013CAA;
					line-height: 40rpx;
				}
			}

			.btnbox {

				width: 240rpx !important;
				height: 80rpx !important;
			}
		}


		.u-popup {}



	}
</style>